@charset 'utf-8';
@import 'header';
@import 'goTop';

.banner {
    width: 100%;
    height: 534px;
    background: url(../assets/images/banner.jpg) 50% 0 no-repeat;
}

.banner,
.yewufanwei {
    background-color: #eee;
}

.detail,
.friend-link {
    background-color: #fff;
}

.detail {
    .container {
        padding: 80px 0 70px 0;
        p {
            width: 788px;
            font: 400 20px/52px $font_family;
            color: #221815;
            margin: 0 auto;
            word-wrap: break-word;
            margin-bottom: 28px;
            i {
                font-size: 28px;
            }
        }
    }
}

.yewufanwei,
.friend-link {
    .container {
        padding-top: 74px;
        h3 {
            width: 100%;
            margin-bottom: 34px;
            font: 400 24px/48px $font_family;
            color: $base_color;
            text-align: center;
        }
    }
}

.yewufanwei {
    .container {
        padding-bottom: 120px;
        .yewu-list {
            width: 100%;
            overflow: hidden;
            .yewu-list-wrap {
                text-align: center;
                .yewu-item {
                    display: inline-block;
                    width: 206px;
                    height: 206px;
                    padding-top: 16px;
                    margin: 0 6px;
                    box-sizing: border-box;
                    background-color: $base_color;
                   a{
                       display: block;
                        i {
                            display: block;
                            width: 100%;
                            height: 130px;
                            background-position: 50% 50%;
                            background-repeat: no-repeat;
                        }

                        span {
                            display: block;
                            width: 100%;
                            height: 54px;
                            font: 400 18px/54px $font_family;
                            color: #fff;
                            text-align: center;
                            overflow: hidden;
                        }
                   }
                }
                .yewu-item01 i {
                    background-image: url(../assets/images/icon-01.png);
                }
                .yewu-item02 i {
                    background-image: url(../assets/images/icon-02.png);
                }
                .yewu-item03 i {
                    background-image: url(../assets/images/icon-03.png);
                }
                .yewu-item04 i {
                    background-image: url(../assets/images/icon-04.png);
                }
            }
        }
    }
}

.friend-link {
    .container {
        padding-bottom: 96px;
        .link-list {
            width: 100%;
            overflow: hidden;
            ul {
                width: 890px;
                margin: 0 auto;
                li {
                    float: left;
                    width: 116px;
                    height: 116px;
                    margin-left: 13px;
                    margin-right: 13px;
                    margin-bottom: 26px;
                    border-width: 3px;
                    border-style: solid;
                    border-color: rgba($color: #159daa, $alpha: .2);
                    a {
                        display: block;
                        width: 100%;
                        height: 100%;
                        line-height: 114px;
                        text-align: center;
                        img {
                            vertical-align: middle;
                        }
                    }
                }
                li:hover{
                    border-color: rgba($color: #159daa, $alpha: 1);
                }
            }
        }
    }
}